<template>
  <div class="innerPageTable-out-flex history-box">
    <NameSpace @clickNamespace="clickNamespace"></NameSpace>
    <SelfAdaption class="history-box-form">
      <Form
        :model="formSearch"
        ref="formRef"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <Form-item
          prop="dataId"
          label="Data ID"
          :rules="{ required: true, message: 'Data ID不能为空', trigger: 'change' }"
        >
          <Select v-model="formSearch.dataId" class="option-box" placeholder="添加通配符'*'进行模糊查询">
            <Option :title="item.dataId" v-for="(item, index) in dataList" :value="item.dataId" :key="index">{{
              item.dataId
            }}</Option>
          </Select>
        </Form-item>
        <Form-item prop="group" label="Group" :rules="{ required: true, message: 'Group不能为空', trigger: 'change' }">
          <Select v-model="formSearch.group" class="option-box" placeholder="添加通配符'*'进行模糊查询">
            <Option :title="item" v-for="(item, index) in groupList" :value="item" :key="index">{{ item }}</Option>
          </Select>
        </Form-item>
        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" @click="searchInfo" />
          <RPButton optType="reset" @click="formReset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="tableRef" :config="pageTableConfig"> </InnerPageTable>
  </div>
</template>

<script>
import API from "@/api/historyVersion";
import { generateColumns } from "./colomns";
import detailModel from "./detailModel.vue";
export default {
  name: "historyVersionIndex",
  components: {},
  props: {},
  data() {
    return {
      dataList: [],
      originDataList: [],
      formSearch: {
        dataId: "",
        group: "",
        namespaceId: "",
        search: "accurate"
      },
      pageTableConfig: {
        loadDataFn: this.getListPage,
        columns: generateColumns.bind(this)(),
        autoFirst: false
      }
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const queryList = Object.keys(this.$route.query);
      if (queryList.length) {
        for (let key of queryList) {
          this.formSearch[key] = this.$route.query[key];
        }
        this.searchInfo();
      }
    },
    goDetail(row) {
      this.openModel(row, "detail");
    },
    goRollBack(row) {
      this.openModel(row, "rollBack");
    },
    openModel(row = {}, type) {
      new this.$pageModal(
        detailModel,
        {
          props: {
            row: {
              ...row,
              ...this.formSearch,
              nid: row.id,
              type
            }
          }
        },
        data => {
          if (data) {
            this.searchInfo();
          }
        }
      );
    },
    clickNamespace(val) {
      this.formSearch.namespaceId = val;
      this.getDataList(val);
    },
    getDataList(namespaceId = "") {
      API.getDataList({
        namespaceId
      }).then(arr => {
        this.originDataList = arr;
        let result = [];
        let obj = {};
        if (arr && arr.length) {
          for (let i = 0; i < arr.length; i++) {
            if (!obj[arr[i].dataId]) {
              result.push(arr[i]);
              obj[arr[i].dataId] = true;
            }
          }
        }
        this.dataList = result;
      });
    },
    goSubscriber(row) {
      this.$router.push({
        name: "subscriber-code",
        query: {
          name: row.name,
          groupName: row.groupName
        }
      });
    },
    getListPage: tableObj => {
      let { responseProcess, initParam, param } = tableObj;
      return API.getListPage({
        ...initParam,
        ...param
      }).then(data => {
        responseProcess(data);
      });
    },
    // 搜索查询
    searchInfo() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.$refs["tableRef"].load(this.formSearch);
        }
      });
    },
    // 搜索重置
    formReset() {
      this.$refs["formRef"].resetFields();
      this.$refs["tableRef"].resource = [];
      this.$refs["tableRef"].loadLocal();
    }
  },
  computed: {
    groupList() {
      let list = this.originDataList.map(item => item.group);
      return [...new Set(list)];
    }
  },
  watch: {}
};
</script>

<style lang='less' scoped>
</style>
